<template>
    <div id="classManage">
      <div class="research">
        <el-input
          placeholder="请输入栏目名称..."
          v-model="input"
          clearable>
        </el-input>
        <el-button type="primary" @click="handleAdd">新增栏目</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="编号"
          width="100"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="栏目名称"
          width="200">
        </el-table-column>
        <el-table-column
          label="启用时间"
          width="200"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ $moment(scope.row.create_date).format('YYYY-MM-DD HH:mm:ss') }}</template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页显示栏-->
      <div class="pagination" >
        <el-button type="danger" @click="handleAllDelete">批量删除</el-button>
        <!--此处增加一个span，即使上面的按钮不显示了，依然能让分页显示在右边，span充当一个组件-->
        <span></span>
        <el-pagination
          @current-change="handleCurrentChange"
          hide-on-single-page
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="totalResult">
        </el-pagination>
      </div>
      <!--编辑对话框-->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible" :append-to-body=true>
        <el-form :model="form">
          <el-form-item label="栏目名称" label-width="100px">
            <el-input v-model="form.title" autocomplete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCommit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ClassManage",
      data(){
          return{
            tableData:[],
            input:'',
            currentPage:1,
            pageSize:8,
            totalResult:0,
            multipleSelection: [],
            dialogFormVisible: false,//编辑对话框可见性
            form:{
              title:'',
              id:''
            },
            temp:'',
          }
      },
      created(){
        this.loadCateCory();
      },
      methods:{
        loadCateCory(){
          const _this = this;
          this.axios({
            method:'post',
            url:"http://localhost:8081/getCountOfCategory",
          }).then(function (resp) {
            _this.totalResult=resp.data;
          });
          this.axios({
            method:'post',
            url:"http://localhost:8081/getSomeCategory",
            params:{'page':_this.currentPage-1,'num':_this.pageSize}
          }).then(function (resp) {
            _this.tableData=resp.data;
          });
        },
        deleteCatecory(ids){
          console.log(ids);
          const _this = this;
          this.axios({
            method:'post',
            url:"http://localhost:8081/deleteCategoryById",
            params:{'cIds':ids.toString()}
          }).then(function (resp) {
            if(resp.data.status==200){
              _this.$message({
                type: 'success',
                message: resp.data.info
              });
              _this.loadCateCory();
            }else{
              _this.$message({
                type: 'error',
                message: resp.data.info
              });
            }
          });
        },
        handleAdd(){
          if(this.input==''){
            this.$alert('请输入栏目标题', '提示', {
              confirmButtonText: '确定',
              type:"warning"
            });
          }else{
            const _this = this;
            this.axios({
              method:'post',
              url:"http://localhost:8081/insertCategory",
              params:{'name':_this.input}
            }).then(function (resp) {
              if(resp.data.status==200){
                _this.$message({
                  type: 'success',
                  message: resp.data.info
                });
                _this.loadCateCory();
              }else{
                _this.$message({
                  type: 'error',
                  message: resp.data.info
                });
              }
            });
          }
        },
        handleSelectionChange(val){
          this.multipleSelection=val;
        },
        handleEdit(index, row){
          this.form.title=row.name;
          this.form.id=row.id;
          this.temp = this.form.title;
          this.dialogFormVisible=true;
        },
        handleDelete(index, row){
          const _this = this;
          this.$confirm('确定删除该栏目？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var ids = [];
            ids.push(row.id);
            _this.deleteCatecory(ids);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        handleCurrentChange(val) {
          this.loadCateCory();
        },
        handleCommit(){
          if(this.temp!=this.form.title){
            const _this = this;
            this.axios({
              method:'post',
              url:"http://localhost:8081/updateCategoryById",
              params:{'name':_this.form.title,'id':_this.form.id}
            }).then(function (resp) {
              if(resp.data.status==200){
                _this.$message({
                  type: 'success',
                  message: resp.data.info
                });
                _this.dialogFormVisible = false;
                _this.loadCateCory();
              }else{
                _this.$confirm(resp.data.info, '错误', {
                  confirmButtonText: '确定',
                  type: 'error'
                })
              }
            });
          }else{
            this.dialogFormVisible = false;
          }
        },
        handleAllDelete(){
          const _this = this;
          if(this.multipleSelection.length==0){
            this.$message({
              message: '请选择要删除的栏目',
              type: 'warning'
            });
          }
          else{
            console.log(this.multipleSelection);
            var ids = [];
            for(var i=0;i<this.multipleSelection.length;i++){
              ids.push(this.multipleSelection[i].id);
            }
            this.$confirm('确定要删除选中的栏目吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              _this.deleteCatecory(ids);
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        },
      }
    }
</script>

<style>
  #classManage{
    width:calc(100% - 20px) ;
    padding: 20px 10px;
  }
  .pagination{
    margin-top: 10px;
    /*display: flex;
    justify-content: space-between;配合使用，用空格自动填补中间区域，让组件左右对齐*/
    display: flex;
    justify-content: space-between;
  }

  .pagination .el-button{
    height: 30px;
    padding: 0px 15px;
  }

  /*搜索框样式*/
  .research{
    display: flow;
    width: 500px;
  }

  .research .el-input__inner{
    height: 30px;
    line-height: 30px;
  }

  .research .el-input__icon{
    line-height: 30px;
  }

  .research .el-input{
    width: 80%;
  }

  .research .el-button{
    height: 30px;
    padding: 0px 15px;
  }
</style>
